@charset 'utf-8';

@import url('reset.css');

@imgWidth:240px;
/* Base Application Styles */
@font-face{
	font-family: 'icons-turn-arrow';
	src: 
		url("../fonts/icons/turn-arrow.eot") format("embedded-opentype"),
		 url("../fonts/icons/turn-arrow.woff") format("woff"), 
		 url("../fonts/icons/turn-arrow.ttf") format("truetype"), 
		 url("../fonts/icons/turn-arrow.svg") format("svg");
}

body,
html{
	width: 100%;
	height:100%;
	background-color:#222;
	transform:rotateZ(0);
}
#app{
	width: 100%;
	height:100%;
}

/*stage -- start*/
.stage{
	position:relative;
	width:100%;
	height:100%;
}
/*stage -- end*/

/*img-sec -- start*/
.img-sec{
	position: relative;
	width: 100%;
	height:100%;
	overflow: hidden;
	background-color:#ddd;
	perspective:1800px;

    .img-figure{
    	position:absolute;
    	background-color:#fff;
    	width: @imgWidth;
		height:270px;
		padding: 20px;
		box-sizing: border-box;
		box-shadow:1px 1px 15px #000;
		cursor:pointer;
		
		transform-origin:0 50% 0;
		transform-style: preserve-3d;
		transition:transform .6s ease-in-out, left .6s ease-in-out, top .6s ease-in-out;
		
		&.is-inverse {
		  transform:translate(@imgWidth) rotateY(180deg);
		  box-shadow: -1px 1px 15px #000;
		}
		img{
		  width:100%;
		}

		figurecaption{
			text-align: center;

			.img-title{
				margin-top:10px;
				color:#a7a0;
				font-size:16px;
				font-weight:bold;
			}

			.img-back{
				position:absolute;
				top:0;
				left: 0;
				box-sizing: border-box;
				width: 100%;
				height: 100%;
				padding: 30px 20px;
				overflow:auto;
				color: #a7a0a2;
				font-size: 18px;
				line-height: 1.6;
				text-indent: 0em;
				background-color:#fff;
				/*先开始时.img-back，旋转了180度，因为translateZ(1px)，位于正面图像的下方*/
				/*当.img-figure旋转时，.img-back又旋转了180度，旋转度数为360,因为translateZ(1px)，位于正面图像的上方*/
				transform: rotateY(180deg) translateZ(1px);
				/*translateZ(1px) 是为了解决Safari 的bug 在http://www.imooc.com/video/11743 13 分 有解释*/
				backface-visibility:hidden;
			}
		}
    }
}
/*img-sec -- end*/

/*control -- start*/
.control{
	position:absolute;
	left:0;
	bottom:30px;
	width: 100%;
	text-align: center;
	z-index: 999;
	display: flex;
	justify-content:center;
	align-items:center;

	.control-unit{
		margin: 0 5px;
		display: inline-block;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color:#aaa;
		cursor: pointer;
		transform-style: preserve-3d;
		transform: scale(.6);
		// color:#fff;
		// line-height: 30px;
		// font-size: 1em;
	
		transition: transform .6s ease-in-out,background-color .3s;

		&.is-center{
			transform:scale(1);
		}

		&.is-inverse{
			transform: rotateY(180deg);
			background-color:#555;
		}
		
		&::after{
			font-family: 'icons-turn-arrow';
			font-size: 80%;
			color:#fff;
			line-height: 30px;
			content:"\e600";

			-webkit-font-smoothing: antialiased;
			-moz-font-smoothing: grayscale;

		}

	}
}
/*control -- end*/